/* eslint-disable react/react-in-jsx-scope */
import Taro,{ Component } from '@tarojs/taro'
import { View , Image , Text} from '@tarojs/components'

import {
  AtTag
} from 'taro-ui'

import phone_icon from '../../image/ic_phone.png'
import topTag from '../../image/ic_top_tag.png'

import BottomInfo from '../ItemBottomInfo/itemBottomInfo.js'

import './convenienceItem.scss'


export default class convenienceItem extends Component {
  static options = {
    addGlobalClass: true
  }

  defaultProps = {
    infoData : {},
    isMine:false
  }

  shopItemClick = (infoData) =>{
    Taro.navigateTo({
      url: `/pages/shop/shopDetail?shopId=` + infoData.id
    })
  }

  onMakePhone = (number , e) => {
    Taro.makePhoneCall({
      phoneNumber : number
    })
    e.stopPropagation()  // 拦截事件冒泡
  }

  render() {
    let infoData = this.props.infoData;

    let shopImages = [];
    if (infoData.newsImages){
      for (let i = 0 ; i < infoData.newsImages.length ; i ++){
        shopImages.push(infoData.newsImages[i]);
        if (i == 3){
          break;
        }
      }
    }
    return (
      <View className='shop-item-main-container' onClick={this.shopItemClick.bind(this,infoData)}>
        {!this.props.isMine &&
        <View className='shop-item-container'>
          <View className='shop-item-sub-container'>
            <Image className='shop-item-cover-image' src={infoData.headUrl} ></Image>
            <View className='shop-item-container-sub'>
              <Text className='shop-item-name'>{infoData.userName}</Text>
              <AtTag active size='small'>
                {infoData.categoryName}
              </AtTag>
            </View>
          </View>
          <View className='shop-item-phone' onClick={this.onMakePhone.bind(this , infoData.mobile)}>
            <Image className='shop-item-phone-icon' src={phone_icon}></Image>
            <Text className='shop-item-phone-text'>电话</Text>
          </View>
        </View>
        }
        <Text className='shop-item-content'>{infoData.content}</Text>
        <View className='shop-item-images-container'>
          {shopImages.map(item => {
            return (<Image className='shop-item-image-single' src={item.imageUrl} mode='aspectFill'></Image>)
          })}
        </View>
        <View className='shop-item-time-container'>
          <View className='shop-item-time'>{infoData.releaseStrDate}</View>
          <View className='shop-item-check'>查看详情 >></View>
        </View>
        <BottomInfo
          browseCount={infoData.viewsCount}
          praiseCount={infoData.praiseCount}
          shareCount={infoData.shareCount}
          itemId={infoData.id}
          itemType={5}
          hasPraise={infoData.isPraise}
        />
        <View className='shop-item-divider'></View>
        {infoData.isTop && <Image className='shop-top-icon' src={topTag}></Image>}
      </View>

    )
  }
}
